<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实践</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <div id="root2"></div>
    <div id="root3"></div>
    <script type="text/babel">
        // 使用事件这种高级功能，通常使用类方式
        class EventCoding extends React.Component {
            name = "后端码匠"

            showName() {
                console.log(this.name);
            }

            show() {
                console.log("点击了触发！");
            }

            _onBlur() {
                console.log('失去焦点');
            }

            showName1 = () => {
                console.log("箭头函数");
            }


            render() {
                // 事件的绑定
                // 比如 vue 中 是 v-on="方法名字" @事件名="方法名" @click="searchClick"
                // Angular ng: (事件名字)="方法名()"
                // 小程序: bind-tap:
                // 原生: onlick=""
                // react: onClick

                // <button onClick={this.show()}>点击事件</button> 此种写法页面刷新就会执行，在react中不要加，不然点击事件会变成页面刷调用的方法
                return (
                    <div>
                        {/* 注释符号写法 */}
                        {/* JSX： XML 要求标签必须闭合 */}
                        <button onClick={this.show}>点击事件</button>
                        <input type="text" onBlur={this._onBlur} />
                        <br />
                        {/* 解决办法： 强制替换 showName 中的 this； bind(), call(), apply()   */}
                        <button onClick={this.showName.bind(this)}>显示名字bind</button>
                        <br />
                        {/* 第二种解决方案  利用箭头函数 ()={} 箭头函数中的 this 与未声明时位置一致 */}
                        <button onClick={() => {
                            this.showName()
                        }}>显示名字bind</button>
                        {/* 箭头函数语法糖 函数体中只有一行代码时 ()=> { xxx } 则 {} 可以省略  ()=> xxx */}
                        <button onClick={() => this.showName()}>显示名字bind</button>
                        <br />
                        {/* shouname1 是箭头函数， 点击时 window 执行了方法， 但是方法的 this 不会变化 */}
                        <button onClick={this.showName1}>显示名字bind</button>

                    </div>
                )
            }
        }

        ReactDOM.render(<EventCoding />, root)
    </script>
</body>

</html>